<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div style="background-color: dodgerblue; height: 15px; width: 3px"></div>
        总存栏 <span style="color: dodgerblue">222</span>只
      </el-header>
      <el-container>
        <el-aside width="500px">
          <el-card style="max-width: 480px">
            <template #header>种母存栏</template>
            <div>
              <VueEcharts style="height: 300px" :option="pieoption"></VueEcharts>
            </div>
          </el-card>
        </el-aside>
        <el-main>
          <el-card style="max-width: 480px; margin-top: -20px">
            <template #header>种公存栏</template>
            <div>
              <VueEcharts style="height: 300px" :option="baroption"></VueEcharts>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import 'echarts';
import { onMounted, ref, watch } from 'vue';
import VueEcharts from 'vue-echarts';
import axios from 'axios';
import { ElMessage } from 'element-plus';
onMounted(() => {
  getEcharts();
});

const pieoption: any = ref([]);
const baroption: any = ref([]);

pieoption.value = {

  tooltip: {
    trigger: 'item'
  },

  series: [
    {

      type: 'pie',
      radius: ['60%', '50%'],
      center: ['50%', '50%'],
      // adjust the start and end angle
      startAngle: 0,
      endAngle: 360,
      data: [
        { value: 5, name: '妊娠' },
        { value: 3, name: '哺乳' },
        { value: 6, name: '空怀' },
      ]
    }
  ]

};
const dataPie=ref([])
const data2=ref([])
const getEcharts=()=>{
  axios.post('http://localhost:5039/api/Inventory/GetGroupGender/GetGroupGender',{
    gender:1
  }).then(res=>{
    console.log(res)
    dataPie.value=res.data.data
  })
}
watch(dataPie,(val:any)=>{
  console.log(val)
  val.forEach((x:any)=>{
    data2.value.push({value:x.count,name:x.varietyName})
  });
  console.log(data2.value)
})
baroption.value = {
  // title: {
  //   text: 'Referer of a Website',
  //   subtext: 'Fake Data',
  //   left: 'center'
  // },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      data: data2.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
</script>


